<template>
  <div class="common-layout__upload">
    <div style="height: 50px"></div>
    <div>
      <el-steps :active="nowTip" simple>
        <el-step title="上传视频" :icon="UploadFilled"/>
        <el-step title="完善信息" :icon="Edit"/>
        <el-step title="上传成功" :icon="Select"/>
      </el-steps>

      <div style="height: 50px"></div>

      <div v-show="nowTip === 1" class="upload-filled">
        <div class="upload-filled-alert">
          <el-alert
              v-if="haveNoUpload"
              title="您有一个未完成上传的视频, 是否继续上传?"
              type="warning"
              show-icon
          >
            <span @click="continueUpload" style="color: #3a8ee6" class="link"
            >继续上传</span
            >
          </el-alert>
        </div>
        <el-upload
            class="upload-demo"
            drag
            action=""
            accept="video/mp4"
            :show-file-list="false"
            :before-upload="uploadVideoBefore"
        >
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">拖拽到此处上传 or <em>点击上传</em></div>
          <template #tip>
            <div class="el-upload__tip">当前仅支持mp4，大小不可超过100MB</div>
          </template>
        </el-upload>
      </div>
      <div v-show="nowTip === 2" class="upload-edit">
        <div>
          <div v-if="uploadProgress < 100">上传进度</div>
          <div v-else-if="uploadProgress === 100">
            上传成功
            <el-icon style="top: 3px" color="#18a900"><Select/></el-icon>
          </div>
          <div v-else style="color: red">
            上传失败
            <el-icon style="top: 3px" color="red">
              <CloseBold/>
            </el-icon>
            <span style="margin-left: 15px" class="link" @click="nowTip = 1">
              <span>重新上传</span>
              <el-icon><RefreshLeft/></el-icon>
            </span>
          </div>
          <div>
            <el-progress
                :text-inside="true"
                :stroke-width="20"
                :percentage="uploadProgress"
                :status="
                uploadProgress < 100
                  ? ''
                  : uploadProgress === 100
                  ? 'success'
                  : 'exception'
              "
                :show-text="uploadProgress <= 100"
            ></el-progress>
          </div>
        </div>
        <UploadEdit
            ref="uploadEdit"
            @nowTip="
            (uploadId) => {
              videoId = uploadId;
              nowTip = 3;
            }
          "
        ></UploadEdit>
      </div>
      <div v-show="nowTip === 3" class="upload-success">
        <div>
          <el-icon size="80px" color="green">
            <SuccessFilled/>
          </el-icon>
          <div>
            <strong>上传成功</strong>
          </div>

          <a class="link" @click="router.toVideo(videoId)">立即查看</a>
        </div>
      </div>
    </div>
    <div style="height: 80px"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { errorNotify, isNull } from "@/utils/common";
import {
  Edit,
  Select,
  UploadFilled,
  CloseBold,
  SuccessFilled,
  RefreshLeft
} from "@element-plus/icons-vue";
import commonApi from "@/api/common";
import UploadEdit from "./upload-edit/UploadEdit.vue";
import router from "@/router/router";
import type { UploadRawFile } from "element-plus";

const nowTip = ref<number>(1);
// 上传进度条
const uploadProgress = ref<number>(0);
// 上传成功后的视频id
const videoId = ref<string>("");
// 用户是否存在没有上传的视频
const haveNoUpload = ref<boolean>(false);
// 标签对象
const uploadEdit = ref<HTMLElement>();

// 自定义axios上传视频并获取生成的视频名称
const uploadVideoBefore = (rawFile: UploadRawFile) => {
  if (rawFile.size / 1024 / 1024 > 100) {
    errorNotify("视频大小不能超过100MB");
    return false;
  }
  nowTip.value = 2;
  let formData = new FormData();
  formData.append("file", rawFile);
  commonApi.uploadVideo(formData, uploadProgress).then((res) => {
    // 获取文件名
    if (res.data.code === 0) {
      uploadProgress.value = 100;
      // @ts-ignore
      uploadEdit.value.setVideoName(res.data.data);
    } else {
      uploadProgress.value = 101;
    }
  });
  // 禁用el-upload原生上传方式
  return false;
};

// 查询到有未上传的视频, 继续上传
const continueUpload = () => {
  nowTip.value = 2;
  uploadProgress.value = 100;
};

onMounted(() => {
  // 请求后端，判断用户是否还有未上传的视频
  commonApi.haveNoUploadVideo().then((res) => {
    if (res.data.code === 0) {
      let data = res.data.data;
      console.log(data);
      if (!isNull(data.videoPath)) {
        haveNoUpload.value = true;
        // @ts-ignore
        uploadEdit.value?.setVideoName(res.data.data.videoPath);
      }
      if (!isNull(res.data.coverPath)) {
        // @ts-ignore
        uploadEdit.value?.setCoverName(res.data.data.coverPath);
      }
    }
  });
});
</script>

<style lang="scss" scoped>
.common-layout__upload {
  & > div {
    width: 90%;
    margin: 0 auto;
  }

  .upload-filled {
    width: 60%;
    margin: 20px auto 0;
  }

  .el-steps.el-steps--simple {
    box-shadow: 0 0 10px #a1a1a1;
  }

  .upload-edit {
    width: 90%;
    margin: 20px auto 0;

    & > div {
      text-align: left;

      &:first-child {
        color: #707070;
        font-size: 15px;
      }
    }
  }

  .upload-success > div {
    margin-top: 100px;
  }
}
</style>

<style lang="scss">
.cover-uploader__upload {
  .el-upload {
    background-color: #e5e5e5;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .el-progress-bar span {
    position: relative;
    right: 5px;
  }

  .upload-filled-alert {
    min-width: 400px;
    height: 50px;
    margin: 0 auto 20px;
  }

  .upload-filled {
    .el-alert {
      width: 100%;

      .el-alert__content {
        width: 87%;
        display: flex;
        justify-content: space-between;
        align-content: center;
        flex-wrap: wrap;
      }

      .link {
        position: relative;
        top: -3px;
      }
    }
  }
}
</style>
